<template>
    <div>
        <div class="title">{{ title }}</div>
        <div class="box-right">
            <div class="line">
                <div class="line-indicator" :style="{
                    width: getLineWidth + '%'
                }"></div>
                <div class="standard-value" :style="{
                    left: Math.floor((standardValue - getMin) / (getMax - getMin) * 100) + '%'
                }">{{ Math.floor((standardValue - getMin) / (getMax - getMin) * 100) }}%</div>
                <div class="range" :style="{
                    width: 32 + '%',
                    left: 60 + '%',
                }">
                    <span>{{ Math.floor((rangeMin - getMin) / (getMax - getMin) * 100) }}%</span>
                    <span>{{ Math.floor((rangeMax - getMin) / (getMax - getMin) * 100) }}%</span>
                </div>
            </div>
            <div class="indicator-value">{{ Math.floor((indicatorValue - getMin) / (getMax - getMin) * 100) }}%</div>

        </div>
    </div>
</template>

<script>
export default {
    // 正向指标线
    name: 'IndicatorLineToRight',
    props: {
        title: {
            type: String,
            default: ''
        },
        //指标值
        indicatorValue: {
            type: Number,
            default: 0
        },
        //院标值
        standardValue: {
            type: Number,
            default: 0
        },
        //合理区间最小值
        rangeMin: {
            type: Number,
            default: 0
        },
        //合理区间最大值
        rangeMax: {
            type: Number,
            default: 0
        },
    },
    computed: {
        getLineWidth() {
            return (this.indicatorValue - this.getMin) / (this.getMax - this.getMin) * 100
        },
        getMin() {
            // 左边60%，中间32%
            const rangeL = 0.6
            const offset = Math.abs(this.rangeMax - this.rangeMin)
            // 在30%范围内，计算出总值是多少
            const max = offset / 0.32

            // rangeMin = 总值 * rangeL + min -> min = rangeMin - 总值 * rangeL
            return this.rangeMin - max * rangeL
        },
        getMax() {
            // 左边60%，中间32%
            const range = 0.32
            const offset = Math.abs(this.rangeMax - this.rangeMin)
            // 在30%范围内，计算出总值是多少
            const max = offset / range
            return max + this.getMin
        },
        getIndicatorPre() {
            return Math.floor((this.indicatorValue - this.getMin) / (this.getMax - this.getMin) * 100)
        }
    }
}
</script>

<style lang="less" scoped>
.title {
    font-size: 15px;
    color: #FFFFFF;
    margin: 0 0 10px;
}

.line-indicator {
    height: 10px;
    background: #1ac47c;
}

.indicator-value {
    font-size: 14px;
    margin: 0 0 0 5px;
    font-weight: 400;
    color: #1AC47C;
    width: 100px;
}

.box-right {
    display: flex;
    width: 600px;
    align-items: center;

    .line {
        flex: 1;
        position: relative;
        display: flex;
        align-items: center;
    }

    .standard-value {
        font-size: 14px;
        color: #D6AB00;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: absolute;
        width: 5px;
        top: -34px;

        &::after {
            content: '';
            display: block;
            width: 5px;
            height: 40px;
            border-radius: 2.5px 2.5px 2.5px 2.5px;
            background: #d6ab00;
        }
    }

    .range {
        height: 36px;
        background: #41666d7a;
        width: 100px;
        position: absolute;

        &>span {
            font-size: 12px;
            color: #00E4FF;
            position: absolute;

            &:first-child {
                left: 0;
                bottom: -17px;
            }

            &:last-child {
                right: 0;
                bottom: -17px;
            }
        }
    }
}
</style>